<template>
	<view class="personal">
		<!-- 顶部栏 -->
		<view class="p_auth">
			<!-- <nav-bar :background="navBackground" isBack backColor="#fff" isFloor floorOpacity="0">
			</nav-bar> -->
			<nav-bars class="i_top" :bgColor="navBackground" fontColor="#fff"></nav-bars>
		</view>
		<!-- 背景墙 -->
		<view class="p_wall">
			<view class="p_wPicture"><image src="https://cos.ryz1620.com/liankun/static/Dengin_bg.png"></image></view>
			<view class="p_wShadow"></view>
		</view>
		<!-- 内容-->
		<view class="i_data">
			<!-- tab栏 -->
			<view class="i_dTabs">
				<view class="i_dtTab" :class="{ active: tabShow }" @tap="tabToggle()">
					<view class="i_dtContain">
						<view class="i_dtCan omit-1" :class="{ active: tabLabel_kind }">
							<view class="i_dtIcon1"></view>
							<text>{{ tabLabel_kind || '广西' }}</text>
						</view>
					</view>
				</view>
				<view class="i_tInput" @click="searchData">
					<view class="i_tiIcon iconfont icon-search"></view>
					<input type="text" disabled v-model="keyword" placeholder="搜索您感兴趣的内容吧" placeholder-class="col-ccc" />
				</view>
			</view>
			<view class="i_dTa">
				<view class="tits">户型</view>
				<view class="listm">
					<view class="roomslist">
						<text v-for="(item, index) in room" :class="{ active: item.id == roomid }" :key="index" @click="tabTogg(item.value, item.id)">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<!-- 筛选框 -->
			<view class="i_dsBg" v-if="tabShow" @click="tabClose"></view>
			<view class="i_dSelect" v-if="tabShow">
				<view class="i_dsBox">
					<view class="x_list">
						<view class="i_dsList">
							<view v-for="item in addressprovince" :key="item.cityid" v-if="item.city_name == '广西'">
								<view class="i_dsItem" :class="{ active: provinceid === item.cityid }" @tap="tabSelectprovince(item.cityid, item.city_name)">
									<view class="i_dsIcon iconfont icon-selected"></view>
									<text>{{ item.city_name }}</text>
								</view>
							</view>
						</view>
						<view class="i_dsList">
							<view v-for="item in addresscity" :key="item.cityid" v-if="item.city_name == '桂林'">
								<view class="i_dsItem" :class="{ active: cityid === item.cityid }" @tap="tabSelectcity(item.cityid, item.city_name)">
									<view class="i_dsIcon iconfont icon-selected"></view>
									<text>{{ item.city_name }}</text>
								</view>
							</view>
						</view>
						<view class="i_dsList">
							<view v-for="item in addressdistrict" :key="item.cityid">
								<view class="i_dsItem" :class="{ active: districtid === item.cityid }" @tap="tabSelectdistrict(item.cityid, item.city_name)">
									<view class="i_dsIcon iconfont icon-selected"></view>
									<text>{{ item.city_name }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="i_dContain" style="margin-top: 40rpx;">
				<!-- 数据列表 -->
				<scroll-view class="i_dList" scroll-y @scrolltolower="nextPage">
					<view class="i_tSwiper">
						<swiper autoplay interval="4200" duration="300" @change="threeBannerChange">
							<swiper-item v-for="(item, index) in banner" :key="index" v-if="index < 3">
								<view class="i_tCont"><image :src="item.img"></image></view>
							</swiper-item>
						</swiper>
						<view class="i_tDots">
							<view class="i_tDot" v-for="(item, index) in banner" :class="{ active: index == threeIndex }" :key="index"><view class="i_tIcon"></view></view>
						</view>
					</view>
					<view class="hottit">热门户型</view>
					<view class="no-card" v-if="list.length == 0">
						<image src="https://manager.ryz1620.com/static/my/sm.png"></image>
						<text>暂无该区域户型方案~</text>
					</view>
					<view class="i_dItem" v-for="(items, index) in list" :key="index">
						<view class="s_tops" @click="toDetail(items.houseid)">
							<view class="ts_left"><image :src="items.cover"></image></view>
							<view class="ts_right">
								<view class="i_tSwiper">
									<swiper autoplay interval="4200" duration="500" @change="threeBanners">
										<swiper-item v-for="(item, index) in items.imgs" :key="index" v-if="index < 3">
											<view class="i_tCont"><image :src="item"></image></view>
										</swiper-item>
									</swiper>
									<view class="i_tDots">
										<view class="i_tDot" :class="{ active: 0 == Indexs }"><view class="i_tIcon"></view></view>
										<view class="i_tDot" :class="{ active: 1 == Indexs }"><view class="i_tIcon"></view></view>
										<view class="i_tDot" :class="{ active: 2 == Indexs }"><view class="i_tIcon"></view></view>
									</view>
								</view>
							</view>
						</view>
						<view class="s_tit" @click="toDetail(items.houseid)">
							{{ items.name }}
							<text>{{ items.num }}方案</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import navBar from '@/components/navBar/navBar.vue';
import service_desginview from '@/service/desginview';
import URL from '@/config/url.js';

export default {
	components: {
		navBar
	},

	data() {
		return {
			addressprovince: [],
			addresscity: [],
			addressdistrict: [],
			tabLabel_kind: '广西',
			banner: [],
			// 轮播图
			threeIndex: 0,
			list: [],
			Indexs: 0,
			tabShow: false,
			house_id: '',
			keyword: '',
			province: '',
			city: '',
			district: '',
			provinceid: '',
			cityid: '',
			districtid: '',
			page: 1,
			pagesize: 10,
			roomid: 0,
			roomValue: 0,
			room: [
				{
					id: 0,
					name: '全部',
					value: 0
				},
				{
					id: 1,
					name: '一室',
					value: 1
				},
				{
					id: 2,
					name: '二室',
					value: 2
				},
				{
					id: 3,
					name: '三室',
					value: 3
				},
				{
					id: 4,
					name: '四室',
					value: 4
				},
				{
					id: 5,
					name: '五室',
					value: 5
				},
				{
					id: 6,
					name: '五室及以上',
					value: '5,20'
				}
			],
			navBackground: 'rgba(255,255,255,0)'
		};
	},
	onLoad() {
		this.$utils.getUrl()
		this.getbanner();
		this.getCitys();
		this.gethotlist();
	},
	onPageScroll(e) {
		let scrollTop = e.scrollTop;
		if (e.scrollTop >= 200) {
			// Nav栏
			this.navBackground = '#fff';
		} else {
			this.navBackground = 'rgba(255,255,255,0)';
		}
	},
	methods: {
		// 切换tab栏
		tabToggle() {
			this.tabShow = !this.tabShow;
		},
		// 切换tab栏
		tabTogg(value, id) {
			console.log(id);
			this.roomid = id;
			this.roomValue = value;
			if (id == 0) {
				this.rooms = '';
				this.roomValue = '';
				this.list = [];
				this.gethotlist();
			} else {
				this.rooms = id;
				this.roomValue = value;
				this.list = [];
				this.gethotlist();
			}
		},
		toDetail(id) {
			uni.navigateTo({
				url: '/pages_view/pages/desiginview/deatil?house_id=' + id
			});
		},
		// 关闭tab栏
		tabClose() {
			this.tabShow = false;
		},
		// 获取banner
		getbanner() {
			service_desginview
				.getbanner({
					type: 3
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.banner = data;
					}
				});
		},
		// 选择省
		tabSelectprovince(id, name) {
			this.addressdistrict = [];
			this.city = '';
			this.district = '';
			this.tabLabel_kind = name;
			this.provinceid = id;
			this.province = name;
			this.list = [];
			this.getcity();
			this.gethotlist();
		},
		// 选择市
		tabSelectcity(id, name) {
			this.cityid = id;
			this.city = name;
			this.tabLabel_kind = name;
			this.list = [];
			this.tabShow = false;
			// this.getdistrict()
			this.gethotlist();
		},
		// 选择区
		tabSelectdistrict(id, name) {
			this.districtid = id;
			this.district = name;
			this.tabLabel_kind = name;
			this.list = [];
			this.tabShow = false;
			this.gethotlist();
		},
		// 获取省市id
		getCitys() {
			service_desginview
				.getCitys({
					cityid: ''
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.addressprovince = data;
					}
				});
		},
		// 获取市id
		getcity() {
			service_desginview
				.getCitys({
					cityid: this.provinceid
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.addresscity = data;
					}
				});
		},
		// 获取区id
		// getdistrict() {
		// 	service_desginview.getCitys({ cityid:this.cityid})
		// 		.then(res => {
		// 			if (res.code == 1) {
		// 				let data = res.data
		// 				this.addressdistrict = data
		// 			}
		// 		})
		// },
		nextPage() {
			this.page++;
			// this.gethotlist()
			service_desginview
				.gethotlist({
					house_id: this.house_id,
					keyword: this.keyword,
					province: this.province,
					city: this.city,
					district: this.district,
					room: this.roomValue,
					page: this.page,
					pagesize: this.pagesize
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data.list;
						// this.list = data;
						this.list = this.list.concat(data)
						// for (let i = 0; i < data.length; i++) {
						// 	this.list.push(data[i])
						// }
						console.log(this.list);
					}
				});
		},
		searchData() {
			uni.navigateTo({
				url:
					'/pages_view/pages/desiginview/seach?province=' +
					this.province +
					'&city=' +
					this.city +
					'&district=' +
					this.district +
					'&provinceid=' +
					this.provinceid +
					'&cityid=' +
					this.cityid +
					'&districtid=' +
					this.districtid
			});
		},
		// 获取热门
		gethotlist() {
			service_desginview
				.gethotlist({
					house_id: this.house_id,
					keyword: this.keyword,
					province: this.province,
					city: this.city,
					district: this.district,
					room: this.roomValue,
					page: this.page,
					pagesize: this.pagesize
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data.list;
						this.list = data;
						// for (let i = 0; i < data.length; i++) {
						// 	this.list.push(data[i])
						// }
					}
				});
		},
		// 3D-轮播图切换
		threeBannerChange(e) {
			this.threeIndex = e.detail.current;
		},
		threeBanners(e) {
			this.Indexs = e.detail.current;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}

.personal {
	background: #fff;
	min-height: 100vh;
}

// 顶部作者栏=====
.personal .p_auth {
	height: 0;
	position: relative;
	z-index: 500;

	.p_aCan {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		opacity: 0;
		transition: opacity 0.3s;

		&.active {
			opacity: 1;
		}
	}

	.p_aFocus {
		width: 114rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: #fff;
		font-size: 20rpx;
		margin: 0 36rpx 0 40rpx;
		border-radius: 28rpx;
		background: #333;
		float: right;

		&.active {
			color: #939393;
			background: #f6f7fb;
		}
	}

	.p_aHead {
		width: 68rpx;
		height: 68rpx;
		margin-right: 28rpx;
		border-radius: 50%;
		background: #f0f0f0;
		overflow: hidden;
		float: left;
	}

	.p_aName {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
		flex: 1;
	}
}

// 背景墙=====
.personal .p_wall {
	height: 352rpx;
	position: relative;

	.p_wPicture {
		width: 100vw;
		height: 426rpx;
		background: #f0f0f0;
		position: absolute;
		top: 0;
		left: 0;
	}

	.p_wShadow {
		width: 100vw;
		height: 426rpx;
		background: linear-gradient(180deg, rgba(18, 19, 23, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
		position: absolute;
		top: 0;
		left: 0;
	}
}

// 内容=====
.personal .i_data {
	margin-top: 40rpx;
	border-radius: 20rpx 20rpx 0 0;
	background: #fff;
	position: relative;
	z-index: 101;
	overflow: hidden;
	display: flex;
	flex-flow: column;
	flex: 1;
	padding: 0 20rpx;
	height: 100%;
}

.i_tInput {
	height: 72rpx;
	border-radius: 36rpx;
	background: #f6f7fb;
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-top: 22rpx;

	& > input {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		padding: 0 24rpx 0 72rpx;
	}
}

.i_tiIcon {
	width: 32rpx;
	height: 32rpx;
	line-height: 32rpx;
	color: #ccc;
	font-size: 32rpx;
	margin-top: -16rpx;
	position: absolute;
	top: 50%;
	left: 28rpx;
}

.i_tSwiper {
	height: 200rpx;
	position: relative;
}

.i_tDots {
	width: 100%;
	position: absolute;
	bottom: 8rpx;
	left: 0;
	display: flex;
	justify-content: center;
}

.i_tDot {
	width: 24rpx;
	height: 36rpx;

	&.active .i_tIcon {
		background: #ffd425;
	}

	.i_tIcon {
		width: 12rpx;
		height: 12rpx;
		margin: 12rpx auto 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.5);
	}
}

.i_tCont {
	height: 100%;
	border-radius: 10rpx;
	background: #f6f7fb;
	position: relative;
	overflow: hidden;
}

.i_tBtn {
	width: 102rpx;
	height: 102rpx;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.i_tbImg {
	width: 42rpx;
	height: 42rpx;
	margin: 20rpx auto 0;
}

.i_tbTxt {
	width: 100%;
	height: 34rpx;
	line-height: 34rpx;
	text-align: center;
	color: #fff;
	font-size: 24rpx;
	position: absolute;
	top: 58rpx;
	left: 0;
}

// tab栏==
.personal .i_data .i_dTabs {
	height: 114rpx;
	display: flex;
	justify-content: space-between;

	.i_dtTab {
		height: 114rpx;
		color: #939393;
		font-size: 24rpx;
		overflow: hidden;
		width: 150rpx;

		.i_dtContain {
			width: 100%;
			height: 100%;
			padding-left: 8rpx;
			padding-right: 8rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
		}

		&:nth-child(1) .i_dtContain {
			padding-left: 26rpx;
			justify-content: flex-start;
		}

		&:nth-last-child(1) .i_dtContain {
			padding-right: 36rpx;
			justify-content: flex-end;
		}

		.i_dtCan {
			height: 114rpx;
			line-height: 114rpx;
			text-align: center;
			padding-right: 20rpx;
			position: relative;

			&.active {
				color: #a98f68;
			}
		}

		.i_dtIcon1,
		.i_dtIcon2,
		.i_dtIcon3 {
			width: 0;
			height: 0;
			border: 6rpx solid transparent;
			border-top-color: #6c6c6c;
			position: absolute;
			top: 50%;
			right: 0;
		}

		.i_dtIcon1 {
			top: 54rpx;
			transition: transform 0.3s;
			transform: rotate(0);
			transform-origin: 50% 25%;
		}

		.i_dtIcon2 {
			border-color: transparent;
			border-bottom-color: #ccc;
			top: 42rpx;

			&.active {
				border-bottom-color: #6c6c6c;
			}
		}

		.i_dtIcon3 {
			border-top-color: #ccc;
			top: 62rpx;

			&.active {
				border-top-color: #6c6c6c;
			}
		}

		.i_dtIcon4 {
			height: 24rpx;
			line-height: 24rpx;
			color: #fff;
			font-size: 20rpx;
			padding: 0 6rpx;
			margin: -12rpx 0 0 -12rpx;
			border-radius: 12rpx;
			background: #a98f68;
			position: absolute;
			top: 50%;
			left: 100%;
		}

		// tab选中效果
		&.active {
			color: #a98f68;

			.i_dtIcon1 {
				border-top-color: #a98f68;
				transform: rotate(180deg);
				transform-origin: 50% 25%;
			}
		}
	}
}

.i_dItem {
	margin: 20rpx 0;
	padding-bottom: 20rpx;
	padding-top: 10rpx;
	border-bottom: 2px solid #f5f5f5;
}

.s_tops {
	position: relative;
	padding-left: 220rpx;

	.ts_left {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		left: 0;
		top: 0;
		border-radius: 10rpx;
		border: 1px #cccccc solid;
		overflow: hidden;
	}

	.ts_right {
		overflow: hidden;

		image {
			height: 420rpx;
		}
	}
}

.s_tit {
	line-height: 80rpx;
	margin-top: 20rpx;
	font-weight: 600;
	position: relative;

	text {
		position: absolute;
		background: #f6f7fb;
		height: 60rpx;
		line-height: 60rpx;
		width: 140rpx;
		text-align: center;
		right: 0;
		top: 10rpx;
		border-radius: 8rpx;
	}
}

// 背景
.i_dsBg {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	left: 0;
	top: 110rpx;
	z-index: 9;
}

.personal .i_data .i_dSelect {
	width: 100%;
	position: absolute;
	top: 110rpx;
	left: 0;
	z-index: 10;

	// 弹窗
	.i_dsBox {
		width: 100%;
		border-radius: 0 0 20rpx 20rpx;
		background: #fff;
	}

	.i_dsList {
		flex: 1;
		overflow-y: auto;
	}

	.i_dsItem {
		height: 62rpx;
		line-height: 62rpx;
		font-size: 24rpx;
		padding-left: 36rpx;
		position: relative;

		&.active {
			color: #a98f68;
		}

		&.active .i_dsIcon {
			display: block;
		}

		.i_dsIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #a58f6d;
			font-size: 32rpx;
			position: absolute;
			top: 14rpx;
			right: 32rpx;
			display: none;
		}
	}

	.i_dsTags {
		padding: 14rpx 22rpx;
		overflow: hidden;

		.i_dsTag {
			padding: 14rpx 10rpx;
			float: left;

			.i_dsTag-box {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				padding: 0 18rpx 0 20rpx;
				background: #f6f7fb;
				border-radius: 26rpx;
			}

			&.active .i_dsTag-box {
				color: #a98f68;
				background: #f9f6f3;
			}

			&:active .i_dsTag-box {
				opacity: 0.88;
			}
		}
	}

	.i_dsBtns {
		height: 88rpx;
		margin-top: 26rpx;
		display: flex;

		.i_dsReset,
		.i_dsConfim {
			height: 88rpx;
			font-size: 24rpx;
			background: #f6f7fb;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			&:active {
				opacity: 0.88;
			}
		}

		.i_dsConfim {
			color: #fff;
			background: #a98f68;
		}
	}
}

.hottit {
	line-height: 60rpx;
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 50rpx;
}

.x_list {
	display: flex;
	height: 400rpx;
	background: #fff;
}

.i_dList {
	height: calc(100vh - 460rpx);
}

.no-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 20rpx 20rpx 0 0;
	padding-top: 40rpx;
}

.no-title {
	padding: 30rpx 0;
}

.no-card > text {
	font-size: 24rpx;
	color: #999;
}

.no-bnt {
	padding: 10rpx 20rpx;
	margin: 20rpx;
	border: 2rpx solid #eee;
	font-size: 26rpx;
	background-color: #fff;
}

.no-card image {
	height: 240rpx;
	width: 240rpx;
	padding: 40rpx;
}

.i_dTa {
	display: flex;
	height: 60rpx;

	.tits {
		width: 100rpx;
		text-align: center;
		line-height: 40rpx;
	}
}

.listm {
	overflow: hidden;
}

.roomslist {
	overflow-x: auto;
	white-space: nowrap;

	text {
		display: inline-block;
		padding: 6rpx 20rpx;
		background: #f6f7fb;
		color: #939393;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	text.active {
		color: #a58f6d;
		background: #f9f6f3;
	}
}
</style>
